<template>
  <div class="zlcj-map-layer-content">
    <div ref="mapAr" id="mapAr"></div>
  </div>
</template>

<script setup>
import "ol/ol.css";
import { ref, onMounted, defineComponent, defineEmits } from "vue";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";
// import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
import Feature from "ol/Feature";
import { LineString, Point, Polygon } from "ol/geom";
import { Icon, Style, Stroke, Circle, Fill, Text } from "ol/style";
import Overlay from "ol/Overlay.js";
import { Image as ImageLayer } from "ol/layer.js";
import ImageWMS from "ol/source/ImageWMS.js";
import VectorTileSource from "ol/source/VectorTile";
import VectorTileLayer from "ol/layer/VectorTile";
import MVT from "ol/format/MVT";
import { defaults } from "ol/interaction/defaults";
import PointerInteraction from "ol/interaction/Pointer";
import VectorLayer from "ol/layer/Heatmap";
import DragPan from "ol/interaction/DragPan";
import emitter from "@/utils/mitt";
import { getMapData } from "@/api/zlcj.js";
import { getHeatMapData } from "@/api/jdld.js";

// 视频
import sp from "@/assets/map/sp.png";
import spa from "@/assets/map/spa.png";

// 噪音
import zy from "@/assets/map/zy.png";
import zya from "@/assets/map/zya.png";

// 内涝
import nl from "@/assets/map/nla.png";
import nla from "@/assets/map/nla.png";

// 气象
import qx from "@/assets/map/qx.png";
// import qxa from '@/assets/map/qxa.png';

const props = defineProps({
  cuttentTime: String,
});

const route = useRoute();
const mapAr = ref(null);
const animating = ref(false);
let map;
// 生成随机数据
const generateRandomData = async () => {
  const features = [];
  let { data } = await getHeatMapData({
    timePeriod: props.cuttentTime,
  });
  // const list = [
  //   { lng: 117.71947093547357, lat: 39.00777436432561, value: 1 },
  //   { lng: 117.71791240425635, lat: 39.005732151006505, value: 1 },
  //   { lng: 117.7172137523314, lat: 39.00428110470083, value: 1 },
  //   { lng: 117.71646135795068, lat: 39.00293754330668, value: 1 },
  // ];
  for (let i = 0; i < data.length; i++) {
    if (data[i].lng && data[i].lat) {
      features.push(
        new Feature({
          geometry: new Point([data[i].lng, data[i].lat]),
          weight: Math.random(),
        })
      );
    }
  }
  return features;
};
const addArea = async() => {
  try {
    // 创建热力图数据源
    const vectorSource = new VectorSource({
      features: await generateRandomData(),
    });
    // 创建热力图图层
    const heatmapLayer = new VectorLayer({
      source: vectorSource,
      blur: 15, // 模糊大小
      radius: 10, // 半径大小
      weight: "weight", // 使用feature的weight属性作为权重
    });
    map.addLayer(heatmapLayer);
  } catch (e) {
    console.error(e);
  }
};

onMounted(async () => {
  map = new Map({
    layers: [
      new ImageLayer({
        source: new ImageWMS({
          url: "/geoserver/bcd/wms",
          params: { LAYERS: "bcd", VERSION: "1.1.0" },
          ratio: 1,
          serverType: "geoserver",
        }),
      }),
    ],
    target: mapAr.value,
    view: new View({
      center: [117.74256851451989, 39.00380206757584],
      projection: "EPSG:4326",
      minZoom: 12,
      zoom: 13.7,
    }),
    interactions: defaults({
      doubleClickZoom: false,
    }),
    controls: [],
  });
  // 监听地图的postrender事件
  map.once("postrender", (event) => {
    addArea();
  });

  // 地图注册点击事件
  map.on("click", (event) => {
    let point = event.coordinate;
    console.log(point);
  });
});

const getView = () => {
  // localStorage.setItem("polython", JSON.stringify(polyonArr.value));
  // return;
  let view = map.getView();
  let center = view.getCenter();
  console.log(center);
  console.log(view);
  center[0] = center[0] - 1;
  center[1] = center[1] - 1;
  view.setCenter(center);
  map.render();

  view.animate({
    center: [114.28, 34.54],
    zoom: 7,
    duration: 1000,
  });

  // 获取图层方法:等等
  // map.getLayers().item[1].getSource().on('click')
};
</script>

<style lang="scss" scoped>
.zlcj-map-layer-content {
  width: 100%;
  height: 100%;
  #mapAr {
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: 1;
  }
}
</style>
